<template>
  <div class="chattingPage">
    <!-- 左边列表 -->
    <div class="chattingListVue">
      <div class="chattingListVue_th">
        <div class="searchVue">
          <input type="text" placeholder="搜索会话" v-model="key" @input="chattingSearch"/>
          <span class="el-icon-search search-icon"></span>
        </div>
      </div>
      <div class="listVue">
        <div
          class="listItem"
          v-for="(item, index) in chatting"
          :key="index"
          :class="{ chatActive: item.id == currentChat.id }"
          @click="toChat(item)"
        >
          <img :src="item.userInfo.avatar" style="width: 50px; height: 50px; border-radius: 50%" />
          <div class="rightVue">
            <div class="flexbetween">
              <span style="color: #000; font-weight: 600">{{ item.userInfo.nickname }}</span>
              <span style="color: #999">{{ item.lastMessageTime }}</span>
            </div>
            <div class="flexbetween">
              <div style="color: #333; padding-right: 20px">{{ item.lastMessageContent }}</div>
              <div class="dot" v-if="item.unreadCount> 0">{{ item.unreadCount }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 中间会话 -->
    <div class="chattingContentVue">
      <img
        src="@/assets/imgs/chat.png"
        class="emptyChat"
        style="width: 128px; height: 128px"
        v-if="history.length === 0"
      />
      <div class="content_th" v-if="JSON.stringify(currentChat) != '{}'">
        <span style="color: #000; font-size: 16px; font-weight: 600" v-if="currentChat.userInfo">与{{ currentChat.userInfo.nickname }}的会话</span>
        <div class="opVue flex">
          <span @click="toTransfer()">转发</span>
          <!-- <span style="padding: 0 20px" @click="toBlack()">拉黑</span> -->
          <span style="padding: 0 20px"></span>
          <span @click="toStop()">结束会话</span>
        </div>
      </div>

      <!-- 历史消息显示区域 -->
      <div class="contentVue" ref="chatBody" @scroll="handleScrollChat">
        <div class="item" v-for="(item, index) in history" :key="index" :style="{ padding: item.senderType == 0 ? 0 : ''}">
          <template v-if="item.senderType == 1">
            <div class="lVue">
              <img src="https://image.yigouxuan.com/crmebimage/public/product/2023/09/25/2dc199805a744324bba6c74af13a8177ck1upnnqkr.png"
                style="width: 50px; height: 50px; border-radius: 50%; margin-right: 20px"
              />
              <!-- 文本消息 -->
              <div class="content" v-if="item.contentType == 1">{{ item.content }}</div>

              <!-- 图片消息 -->
              <img :src="item.content" class="img" v-if="item.contentType == 2" @click="handlePreview(item.content)" />

              <!-- 视频消息 -->
              <video :src="item.content" controls v-if="item.contentType == 3" ></video>

              <!-- 商品消息 -->
              <div class="product" v-if="item.contentType == 4" @click="handleAudit(item.contentObj.productId, false)">
                <img :src="item.contentObj.image" style="width: 70px; height: 70px; border-radius: 4px" />
                <div
                  style="
                    flex: 1;
                    padding-left: 15px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                  "
                >
                  <div style="color: #333; font-size: 15px; font-weight: 600; line-height: 1.4">
                    {{ item.contentObj.name }}
                  </div>
                  <div style="color: #f53f3f; font-size: 15px; font-weight: 600">￥{{ item.contentObj.price }}</div>
                </div>
              </div>

              <!-- 订单消息 -->
              <div class="order" v-if="item.contentType == 5" @click="onOrderDetails(item.contentObj.orderNo)">
                <div class="flex" style="width: 100%; height: 50px; display: flex">
                  <img :src="item.contentObj.image" style="width: 50px; height: 50px; border-radius: 4px" />
                  <div
                    style="
                      flex: 1;
                      padding-left: 15px;
                      display: flex;
                      flex-direction: column;
                      justify-content: space-between;
                    "
                  >
                    <div style="display: flex; justify-content: space-between; align-items: center">
                      <div class="line-1" style="color: #333; font-size: 15px; font-weight: 600; line-height: 1.4;">
                        {{ item.contentObj.name }}
                      </div>
                      <div style="color: #fe3434; font-weight: 600; width: 120px; text-align: right;">{{ statusArr[item.contentObj.orderStatus] }}</div>
                    </div>
                    <div style="color: #9aa3ae; font-size: 14px; font-weight: 600">
                      共{{ item.contentObj.productCount }}件商品，总价<span style="color: #fe3434;">¥{{ Number(item.contentObj.price) * item.contentObj.productCount }}</span>   
                    </div>
                  </div>
                </div>
                <div
                  style="
                    width: 100%;
                    height: 45px;
                    display: flex;
                    justify-content: space-between;
                    flex-direction: column;
                    margin-top: 15px;
                  "
                >
                  <div style="width: 100%; display: flex; justify-content: space-between">
                    <div style="color: #4e5969; font-size: 14px">订单编号</div>
                    <div style="color: #333; font-size: 14px; font-weight: 600">{{ item.contentObj.orderNo }}</div>
                  </div>
                  <div style="width: 100%; display: flex; justify-content: space-between">
                    <div style="color: #4e5969; font-size: 14px">下单时间</div>
                    <div style="color: #333; font-size: 14px; font-weight: 600">{{ item.createTime }}</div>
                  </div>
                </div>
              </div>

              <!-- 售后单消息 -->
              <div class="order" v-if="item.contentType == 6" @click="toOrderDetails(item.contentObj.refundOrderNo)">
                <div class="flex" style="width: 100%; height: 50px; display: flex">
                  <img :src="item.contentObj.image" style="width: 50px; height: 50px; border-radius: 4px" />
                  <div
                    style="
                      flex: 1;
                      padding-left: 15px;
                      display: flex;
                      flex-direction: column;
                      justify-content: space-between;
                    "
                  >
                    <div style="display: flex; justify-content: space-between; align-items: center">
                      <div class="line-1" style="color: #333; font-size: 15px; font-weight: 600; line-height: 1.4">
                        {{ item.contentObj.name }}
                      </div>
                      <div style="color: #fe3434; font-weight: 600;  width: 120px; text-align: right;">
                        {{ soldStatusArr[item.contentObj.refundStatus] }}
                      </div>
                    </div>
                    <div style="color: #9aa3ae; font-size: 14px; font-weight: 600">
                      共{{ item.contentObj.productCount }}件商品，总价<span style="color: #fe3434;">¥{{ Number(item.contentObj.price) * item.contentObj.productCount }}</span>  
                    </div>
                  </div>
                </div>
                <div
                  style="
                    width: 100%;
                    height: 45px;
                    display: flex;
                    justify-content: space-between;
                    flex-direction: column;
                    margin-top: 15px;
                  "
                >
                  <div style="width: 100%; display: flex; justify-content: space-between">
                    <div style="color: #4e5969; font-size: 14px">售后单号</div>
                    <div style="color: #333; font-size: 14px">{{ item.contentObj.refundOrderNo }}</div>
                  </div>
                  <div style="width: 100%; display: flex; justify-content: space-between">
                    <div style="color: #4e5969; font-size: 14px">申请时间</div>
                    <div style="color: #333; font-size: 14px">{{ item.createTime }}</div>
                  </div>
                </div>
              </div>
            </div>
          </template>

          <template v-if="item.senderType == 2">
            <div class="rVue">
              <!-- 售后订单消息 -->
              <div class="order" v-if="item.contentType == 6" @click="toOrderDetails(item.contentObj.refundOrderNo)">
                <div class="flex" style="width: 100%; height: 50px; display: flex">
                  <img :src="item.contentObj.image" style="width: 50px; height: 50px; border-radius: 4px" />
                  <div
                    style="
                      flex: 1;
                      padding-left: 15px;
                      display: flex;
                      flex-direction: column;
                      justify-content: space-between;
                    "
                  >
                    <div style="display: flex; justify-content: space-between; align-items: center">
                      <div class="line-1" style="color: #333; font-size: 15px; font-weight: 600; line-height: 1.4">
                        {{ item.contentObj.name }}
                      </div>
                      <div style="color: #fe3434; font-weight: 600;  width: 120px; text-align: right;">
                        {{ soldStatusArr[item.contentObj.refundStatus] }}
                      </div>
                    </div>
                    <div style="color: #9aa3ae; font-size: 14px; font-weight: 600">
                      共{{ item.contentObj.productCount }}件商品，总价<span style="color: #fe3434;">¥{{ Number(item.contentObj.price) * item.contentObj.productCount}}</span> 
                    </div>
                  </div>
                </div>
                <div
                  style="
                    width: 100%;
                    height: 45px;
                    display: flex;
                    justify-content: space-between;
                    flex-direction: column;
                    margin-top: 15px;
                  "
                >
                  <div style="width: 100%; display: flex; justify-content: space-between">
                    <div style="color: #4e5969; font-size: 14px">售后单号</div>
                    <div style="color: #333; font-size: 14px">{{ item.contentObj.refundOrderNo }}</div>
                  </div>
                  <div style="width: 100%; display: flex; justify-content: space-between">
                    <div style="color: #4e5969; font-size: 14px">申请时间</div>
                    <div style="color: #333; font-size: 14px">{{ item.createTime }}</div>
                  </div>
                </div>
              </div>

              <!-- 订单消息 -->
              <div class="order" v-if="item.contentType == 5" @click="onOrderDetails(item.contentObj.orderNo)">
                <div class="flex" style="width: 100%; height: 50px; display: flex">
                  <img :src="item.contentObj.image" style="width: 50px; height: 50px; border-radius: 4px" />
                  <div
                    style="
                      flex: 1;
                      padding-left: 15px;
                      display: flex;
                      flex-direction: column;
                      justify-content: space-between;
                    "
                  >
                    <div style="display: flex; justify-content: space-between; align-items: center">
                      <div class="line-1" style="color: #333; font-size: 15px; font-weight: 600; line-height: 1.4">
                        {{ item.contentObj.name }}
                      </div>
                      <span style="color: #fe3434; font-weight: 600;  width: 120px; text-align: right;">{{
                        statusArr[item.contentObj.orderStatus]
                      }}</span>
                    </div>
                    <div style="color: #9aa3ae; font-size: 14px; font-weight: 600">
                      共{{ item.contentObj.productCount }}件商品，总价<span style="color: #fe3434;">¥{{ Number(item.contentObj.price) * item.contentObj.productCount }}</span> 
                    </div>
                  </div>
                </div>
                <div
                  style="
                    width: 100%;
                    height: 45px;
                    display: flex;
                    justify-content: space-between;
                    flex-direction: column;
                    margin-top: 15px;
                  "
                >
                  <div style="width: 100%; display: flex; justify-content: space-between">
                    <div style="color: #4e5969; font-size: 14px">订单编号</div>
                    <div style="color: #333; font-size: 14px">{{ item.contentObj.orderNo }}</div>
                  </div>
                  <div style="width: 100%; display: flex; justify-content: space-between">
                    <div style="color: #4e5969; font-size: 14px">下单时间</div>
                    <div style="color: #333; font-size: 14px">{{ item.createTime }}</div>
                  </div>
                </div>
              </div>

              <!-- 商品消息 -->
              <div class="product" v-if="item.contentType == 4" @click="handleAudit(item.contentObj.productId, false)">
                <img :src="item.contentObj.image" style="width: 70px; height: 70px; border-radius: 4px" />
                <div
                  style="
                    flex: 1;
                    padding-left: 15px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                  "
                >
                  <div class="line-1" style="color: #333; font-size: 15px; font-weight: 600; line-height: 1.4">
                    {{ item.contentObj.name }}
                  </div>
                  <div style="color: #f53f3f; font-size: 15px; font-weight: 600">￥{{ item.contentObj.price }}</div>
                </div>
              </div>

              <!-- 视频消息 -->
              <video :src="item.content" controls v-if="item.contentType == 3"></video>

              <!-- 图片消息 -->
              <img :src="item.content" class="img" v-if="item.contentType == 2" @click="handlePreview(item.content)" />

              <!-- 文本消息 -->
              <div class="content" v-if="item.contentType == 1">{{ item.content }}</div>
              <img
                src="@/assets/images/service.png"
                style="width: 50px; height: 50px; border-radius: 50%; margin-left: 20px"
              />
            </div>
          </template>

          <!-- <template v-if="item.contentType==31">
              <div style="text-align: center;">{{ item.content }}</div>
          </template> -->
        </div>
        <div ref="scrollBottom"></div>
      </div>

      <!-- 底部发送发个消息区域 -->
      <div class="contentOpration" v-if="JSON.stringify(currentChat) != '{}'">
        <div class="opration">
          <div class="opration-left">
            <!-- <div class="li">
              <img src="../../../assets/imgs/smile.png" title="发送表情" style="width: 26px; height: 26px;">
            </div> -->
            <div class="li">
              <el-upload
                action
                :http-request="handleUploadImg"
                :headers="myHeaders"
                :show-file-list="false"
                accept="image/*"
              >
                <img src="../../../assets/imgs/img.png" title="发送图片" style="width: 26px; height: 26px" />
              </el-upload>
            </div>
            <div class="li">
              <el-upload
                action
                :http-request="handleUploadVideo"
                :headers="myHeaders"
                :show-file-list="false"
                accept="video/mp4,video/webm,video/ogg"
              >
                <img src="../../../assets/imgs/video.png" title="发送视频" style="width: 26px; height: 26px" />
              </el-upload>
            </div>
          </div>
          <div class="fastBtn" @click="tabChange(4)">快捷回复</div>
        </div>
        <textarea placeholder="请输入" v-model="msg" @keyup.enter="sendFun(1)"></textarea>
        <div style="display: flex; justify-content: flex-end; padding-right: 20px">
          <div class="sendBtn" :class="{ active: JSON.stringify(currentChat) == '{}' }" @click="sendFun(1)">发送</div>
        </div>
      </div>
    </div>

    <!-- 右边操作 -->
    <div class="rightVue" v-if="JSON.stringify(currentChat) != '{}'">

      <div class="right_th">
        <div class="tab" :class="{ tabActive: current === 0 }" @click="tabChange(0)">客户资料</div>
        <div class="tab" :class="{ tabActive: current === 1 }" @click="tabChange(1)">订单列表</div>
        <div class="tab" :class="{ tabActive: current === 2 }" @click="tabChange(2)">售后单列表</div>
        <div class="tab" :class="{ tabActive: current === 3 }" @click="tabChange(3)">商品列表</div>
        <div class="tab" :class="{ tabActive: current === 4 }" @click="tabChange(4)">快捷回复</div>
      </div>
      <div class="box" ref="listBody" @scroll="handleScrollMore">
        <Info v-if="current == 0" :user="currentChat"></Info>
        <Order
          v-if="current == 1"
          @sendOrder="sendOrder"
          :userId="currentChat.userId"
          ref="child"
          @toDetail="toDetail"
        ></Order>
        <Sold
          v-if="current == 2"
          @sendSold="sendSold"
          :userId="currentChat.userId"
          ref="child"
          @toDetail="toDetail"
        ></Sold>
        <Product @sendProduct="sendProduct" v-if="current == 3" ref="child" @toDetail="toDetail"></Product>
        <Question v-if="current == 4" ref="child" @sendQuestion="sendQuestion"></Question>
      </div>
    </div>

    <!-- 商品详情 -->
    <info-from
      ref="infoFrom"
      :componentKey="componentKey"
      :is-atud="isAtud"
      :is-show="isShow"
      :productId="productId"
      @onCloseInfo="dialogVisibleInfo = false"
      fromType="product"
      :dialogVisibleInfoData="dialogVisibleInfo"
    />
    <!-- 订单详情 -->
    <details-from ref="orderDetail" :orderNo="orderNo" />

    <!--售后单详情-->
    <refund-order-detail
      :drawerVisible="drawerVisible"
      :refundOrderNo="refundOrderNo"
      v-if="drawerVisible"
      @onClosedrawerVisible="drawerVisible = false"
    ></refund-order-detail>

    <!--预览图片-->
    <div v-if="previewVisible">
      <div class="bg"></div>
    </div>

    <el-dialog title="转接" :visible.sync="dialogTableVisible10" width="500px" top="30vh">
      <div class="dialogVue">
        <div style="display: flex; align-items: center">
          <div class="label">选择客服</div>
          <el-select v-model="toAccountId" filterable placeholder="请输入关键字" style="flex: 1; margin-left: 20px">
            <el-option
              v-for="item in serviceList"
              :key="item.accountId"
              :label="item.nickname"
              :value="item.accountId"
            ></el-option>
          </el-select>
        </div>
        <div style="display: flex; align-items: center; margin-top: 20px">
          <div class="label">转接备注</div>
          <el-input
            type="textarea"
            v-model="reason"
            placeholder="请输入"
            resize="none"
            :rows="4"
            style="flex: 1; margin-left: 20px"
          ></el-input>
        </div>
        <div class="btnVue">
          <div class="btn" @click="dialogTableVisible10 = false">取消</div>
          <div class="btn" @click="transferFun">确定</div>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import Info from '../components/info.vue';
import Product from '../components/product.vue';
import Order from '../components/order.vue';
import Sold from '../components/sold.vue';
import Question from '../components/question.vue';
import { mapState, mapGetters } from 'vuex';
import { sendMessage, endChat, transferChat, groupList } from '@/api/msg';
import { fileImageApi, fileFileApi } from '@/api/systemSetting';
import { userDetailApi } from '@/api/user';
import { getToken } from '@/utils/auth';
import infoFrom from '@/components/productInfo';
import detailsFrom from '@/components/OrderDetail';
import RefundOrderDetail from '@/components/refundOrderDetail.vue';
export default {
  components: {
    Info,
    Product,
    Order,
    Sold,
    infoFrom,
    detailsFrom,
    RefundOrderDetail,
    Question
  },

  mounted() {
    this.$store.dispatch('getChatting');
    this.$refs.chatBody.addEventListener('scroll', this.handleScrollChat);
    if (this.currentChat && this.currentChat.userId) this.getUserDetail();
  },

  // beforeDestroy() {
  //     if(this.$refs.chatBody) this.$refs.chatBody.removeEventListener('scroll', this.handleScrollChat);
  //     if(this.$refs.listBody) this.$refs.listBody.removeEventListener('scroll', this.handleScrollMore);
  // },

  computed: {
    ...mapState(['chatting', 'currentChat', 'history']),
    ...mapGetters(['chatting', 'currentChat', 'history']),
  },
  watch: {
    '$store.state.message.random'() {
      this.toBottom();
    },
    '$store.state.message.wsStatus'() {
      if (!this.$store.state.message.wsStatus) {
        console.log('监控到ws连接已断开');
      }
    },
  },
  data() {
    return {
      current: 0,
      form: {
        conversationId: '', // 会话ID
        page: 1, //页码
        limit: 50, //每页数量
      },
      msg: '',
      user: {},
      myHeaders: { 'X-Token': getToken() },
      statusArr: [
        '待支付',
        '待发货',
        '部分发货',
        '待核销',
        '待收货',
        '已收货',
        '已完成',
        '',
        '',
        '已取消',
        '待配送',
        '配送中',
        '已送达',
      ],
      soldStatusArr: ['待审核', '商家拒绝', '退款中', '已退款', '用户退货', '商家待收货', '已撤销'],
      dialogVisibleInfo: false,
      isShow: false,
      isAtud: false,
      componentKey: 0,
      productId: '',
      orderNo: '',
      refundOrderNo: '',
      drawerVisible: false,
      previewVisible: false,
      frontDomainUrl: '',
      dialogTableVisible10: false,
      serviceList: [],
      reason: '',
      toAccountId: '',
      isSending: false,
      key: "",
    };
  },

  methods: {
    // 右部分tab切换
    tabChange(index) {
      if (this.current == index) return;
      this.current = index;
      if (index === 0) return;
      this.$nextTick(() => {
        this.$refs.child.getList(this.currentChat.userId);
      });
    },

    getUserDetail() {
      userDetailApi(this.currentChat.userId).then((res) => {
        this.user = res;
        console.log('用户信息', this.user);
      });
    },

    chattingSearch(){ //userInfo.nikeName
      console.log(this.key, this.chatting)
      let list = []
      for(let i=0; i<this.chatting.length; i++) {
        if(this.chatting[i].userInfo.nikeName.includes(this.key)) {
          list.push(this.chatting[i])
        }
      }
      console.log("list1234566546", list)
      this.$store.commit("SET_CHATTING", list)
    },

    // 查看商品详情
    handleAudit(id, c) {
      this.productId = id;
      this.isShow = true;
      this.isAtud = c;
      this.componentKey += 1;
      this.dialogVisibleInfo = true;
    },

    // 订单详情
    onOrderDetails(id) {
      console.log(id);
      this.orderNo = id;
      this.$nextTick(() => {
        this.$refs.orderDetail.getDetail(id);
        this.$refs.orderDetail.getOrderInvoiceList(id);
        this.$refs.orderDetail.dialogVisible = true;
      });
    },

    toTransfer() {
      this.dialogTableVisible10 = true;
      groupList().then((res) => {
        console.log(res);
        this.serviceList = res.list;
      });
    },

    // handlePreview(url) {
    //     this.previewVisible = true;
    //     this.frontDomainUrl = url;
    // },

    // 售后单详情
    toOrderDetails(refundOrderNo) {
      this.refundOrderNo = refundOrderNo;
      this.drawerVisible = true;
    },

    toDetail(type, data) {
      if (type === 'order') this.onOrderDetails(data);
      if (type === 'sold') this.toOrderDetails(data);
      if (type === 'product') this.handleAudit(data, false);
    },

    // 聊天记录定位到最后一行
    handleScrollChat() {
      // const scrollTop = event.target.scrollTop;
      // if(scrollTop==0) {
      //     console.log("聊天记录到顶了，可以加载下一页")
      // }
    },

    // 右边信息列表触底加载
    handleScrollMore() {
      const container = this.$refs.listBody;
      if (container.scrollTop + container.clientHeight >= container.scrollHeight) {
        // 触底逻辑
        console.log('商品列表触底了！');
        this.$refs.child.getMore(this.currentChat.userId);
      }
    },

    // 滑动到底部
    toBottom() {
      this.$nextTick(() => {
        this.$refs.scrollBottom.scrollIntoView({
          behavior: 'instant', // 平滑过渡  instant
          block: 'start', // 上边框与视窗顶部平齐。默认值
        });
      });
    },

    // 删除某一会话
    toDelete() {
      this.$confirm('此操作将删除该会话, 是否继续?', '删除会话', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message({
          type: 'success',
          message: '删除会话成功!',
        });
      });
    },

    // 结束会话
    toStop() {
      this.$confirm('当前会话正在进行中，确定结束吗?', '结束会话', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        endChat({
          conversationId: this.currentChat.id,
        }).then((res) => {
          this.$store.dispatch('getChatting');
          this.$store.commit('SET_CURRENTCHAT', {});
          this.$store.commit('SET_HISTORY', []);
          this.$message({
            type: 'success',
            message: '结束会话成功!',
          });
        });
      });
    },

    transferFun() {
      if (!this.reason) return this.$message('请输入转接理由');
      if (!this.toAccountId) return this.$message('请选择客服');
      transferChat({
        conversationId: this.currentChat.id,
        reason: this.reason,
        toAccountId: this.toAccountId,
      }).then((res) => {
        this.dialogTableVisible10 = false
        this.$store.dispatch('getChatting');
        this.$store.commit('SET_CURRENTCHAT', {});
        this.$store.commit('SET_HISTORY', []);
        this.$message({
          type: 'success',
          message: '转接会话成功!',
        });
      }).catch(err=>{
        this.$message({
          type: 'error',
          message: err.message,
        });
      });
    },

    // 拉黑
    toBlack() {
      this.$confirm('确定拉黑该用户吗?', '拉黑用户', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }).then(() => {
        this.$message({
          type: 'success',
          message: '拉黑用户成功!',
        });
      });
    },

    // 发送消息
    sendFun(contentType, msg) {
      if (this.msg) this.msg = this.msg.trim();
      if (JSON.stringify(this.currentChat) == '{}') return;
      console.log(!this.msg, msg == undefined);
      if (!this.msg && msg == undefined) return this.$message('发送消息内容不能为空');
      if(this.isSending) return
      this.isSending = true
      sendMessage({
        content: msg || this.msg,
        contentType: contentType,
        conversationId: this.currentChat.id,
      }).then((res) => {
        console.log(res);

        // 把消息push进聊天记录中
        if (contentType <= 3) {
          this.$store.state.message.history.push(res);
          //   修改会话列表中的状态
          this.chatting.forEach((element) => {
            if (element.id == this.currentChat.id) {
              element.lastMessageTime = res.createTime;
              element.lastMessageContent = res.content;
            }
          });
        } else {
          let obj = {
            contentObj: res.contentObj,
            senderType: res.senderType,
            isAdminRead: res.isAdminRead,
            isUserRead: res.isUserRead,
            contentType: res.contentType,
            createTime: res.createTime,
            userId: res.userId,
          };
          this.$store.state.message.history.push(obj);
          let arr = ['', obj.content, '【图片】', '【视频】', '【商品】', '【订单】', '【售后单】'];
          this.chatting.forEach((element) => {
            if (element.id == this.currentChat.id) {
              element.lastMessageTime = res.createTime;
              element.lastMessageContent = arr[obj.contentType];
            }
          });
        }
        this.isSending = false
        this.msg = '';
        setTimeout(() => {
          this.toBottom();
        }, 500);
      }).catch(()=>{
        this.isSending = false
      });
    },

    // 发送图片
    handleUploadImg(param) {
      const formData = new FormData();
      const data = {
        model: 'system',
        pid: 7,
      };
      formData.append('multipart', param.file);
      let loading = this.$loading({
        lock: true,
        text: '图片上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)',
      });
      fileImageApi(formData, data)
        .then((res) => {
          console.log(res);
          loading.close();
          this.sendFun(2, res.url);
        })
        .catch((err) => {
          loading.close();
          console.log(err);
        });
    },

    // 发送视频
    handleUploadVideo(param) {
      const formData = new FormData();
      const data = {
        model: 'system',
        pid: 7,
      };
      formData.append('multipart', param.file);
      let loading = this.$loading({
        lock: true,
        text: '图片上传中，请稍候...',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)',
      });
      fileFileApi(formData, data)
        .then((res) => {
          console.log(res);
          loading.close();
          this.sendFun(3, res.url);
        })
        .catch((err) => {
          loading.close();
          console.log(err);
        });
    },

    // 发送商品
    sendProduct(id) {
      this.sendFun(4, id);
    },

    // 发送订单
    sendOrder(orderNo) {
      this.sendFun(5, orderNo);
    },

    // 发送售后单
    sendSold(refundOrderNo) {
      this.sendFun(6, refundOrderNo);
    },

    // 发送常见问题
    sendQuestion(content){
      this.msg = content
    },

    // 去聊天
    toChat(item) {
      console.log(item);
      this.$store.commit('SET_CURRENTCHAT', item);
      this.form.userId = item.userId;
      this.form.conversationId = item.id;
      // 获取聊天记录
      this.$store.dispatch('getHistory', this.form).then((res) => {
        setTimeout(() => {
          this.$store.dispatch('getChatting');
          this.toBottom();
        }, 500);
      });
      this.current = 0;
      this.getUserDetail();
      this.$nextTick(() => {
        this.$refs.listBody.addEventListener('scroll', this.handleScrollMore);
      });
    },
  },
};
</script>


<style lang="scss" scoped>
.chattingPage {
  width: 100%;
  height: calc(100vh - 186px);
  background: #fff;
  display: flex;
  .bg {
    z-index: 100;
    position: fixed;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
  }
  .dialogVue {
    padding-bottom: 30px;
    .label {
      color: #999;
    }
    textarea {
      flex: 1;
      height: 80px;
      padding: 15px;
      box-sizing: border-box;
      outline: none;
      margin-left: 15px;
      border: 1px solid #f5f5f5;
      color: #333;
      font-size: 14px;
      border-radius: 4px;
    }
  }
  .btnVue {
    display: flex;
    justify-content: flex-end;
    margin-top: 15px;
    .btn {
      width: 66px;
      height: 36px;
      line-height: 36px;
      text-align: center;
      margin-left: 15px;
      cursor: pointer;
    }
    .btn:nth-child(1) {
      color: #333;
      border: 1px solid #f5f5f5;
      border-radius: 4px;
    }
    .btn:nth-child(2) {
      color: #fff;
      background: #0256ff;
      border-radius: 4px;
    }
  }
  .chattingListVue {
    width: 400px;
    height: calc(100vh - 186px);
    border-right: 1px solid #f5f5f5;
    .chattingListVue_th {
      width: 400px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: center;
      border-bottom: 1px solid #f5f5f5;
      .searchVue {
        width: 360px;
        height: 40px;
        border: 1px solid #f5f5f5;
        border-radius: 6px;
        display: flex;
        align-items: center;
        position: relative;
        input {
          width: 100%;
          outline: none;
          border: none;
          padding-left: 10px;
          font-size: 14px;
        }
        input::-webkit-input-placeholder {
          font-size: 13px;
          color: #999;
        } //使用webkit内核的浏览器
        input:-moz-placeholder {
          font-size: 13px;
          color: 999;
        } //Firefox版本4-18
        input::-moz-placeholder {
          font-size: 13px;
          color: 999;
        } //Firefox版本19+
        input:-ms-input-placeholder {
          font-size: 13px;
          color: 999;
        } ////IE浏览器
        .search-icon {
          position: absolute;
          right: 10px;
          top: 10px;
          font-size: 18px;
          color: #999;
        }
      }
    }
    .listVue {
      width: 100%;
      height: calc(100vh - 186px - 60px);
      overflow: scroll;
      box-sizing: border-box;
      .listItem {
        width: 100%;
        height: 80px;
        border-bottom: 1px solid #f5f5f5;
        display: flex;
        align-items: center;
        padding: 0 20px;
        cursor: pointer;
        .close-icon {
          color: #999;
          font-size: 18px;
          opacity: 0;
        }
        .rightVue {
          flex: 1;
          height: 50px;
          padding: 0px 0 0px 10px;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          .flexbetween {
            display: flex;
            justify-content: space-between;
            align-items: center;
            .dot {
              width: 20px;
              height: 20px;
              background: #fa746b;
              border-radius: 50%;
              text-align: center;
              line-height: 20px;
              color: #fff;
              font-size: 10px;
            }
          }
        }
      }
      .listItem:hover {
        background: #f5f5f5;
        .close-icon {
          opacity: 1;
        }
      }
      .chatActive {
        background: #f5f5f5;
      }
    }
    .listVue::-webkit-scrollbar {
      width: 0;
    }
  }

  .chattingContentVue {
    flex: 1;
    height: calc(100vh - 186px);
    background: #f5f5f5;
    position: relative;
    .emptyChat {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
    }
    .content_th {
      width: 100%;
      height: 70px;
      background: #fff;
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0 20px;
      .opVue {
        display: flex;
        span {
          font-size: 16px;
          color: #0256ff;
          cursor: pointer;
        }
        span:hover {
          opacity: 0.7;
        }
      }
    }
    .contentVue {
      width: 100%;
      height: calc(100vh - 386px - 70px);
      background: #f5f5f5;
      overflow: scroll;
      .item {
        width: 100%;
        padding: 20px 20px 0;
        .lVue {
          width: 100%;
          display: flex;
          .content {
            max-width: 60%;
            border-radius: 0 15px 15px 15px;
            color: #333;
            background: #fff;
            padding: 15px;
            line-height: 1.4;
          }
          .img {
            max-width: 200px;
            height: auto;
            cursor: pointer;
            border-radius: 4px;
          }
          video {
            max-width: 300px;
            height: auto;
          }
          .product {
            width: 60%;
            height: 100px;
            border-radius: 0 15px 15px 15px;
            background: #fff;
            padding: 15px;
            display: flex;
            cursor: pointer;
          }
          .order {
            width: 60%;
            height: 140px;
            border-radius: 0 15px 15px 15px;
            background: #fff;
            padding: 15px;
            cursor: pointer;
          }
        }
        .rVue {
          width: 100%;
          display: flex;
          justify-content: flex-end;
          .content {
            max-width: 60%;
            border-radius: 15px 0 15px 15px;
            color: #fff;
            background: #2561ef;
            padding: 15px;
            line-height: 1.4;
          }
          .img {
            max-width: 200px;
            height: auto;
            cursor: pointer;
            border-radius: 4px;
          }
          video {
            max-width: 300px;
            height: auto;
          }
          .product {
            width: 60%;
            height: 100px;
            border-radius: 15px 0 15px 15px;
            background: #fff;
            padding: 15px;
            display: flex;
            cursor: pointer;
          }
          .order {
            width: 60%;
            height: 140px;
            border-radius: 15px 0 15px 15px;
            background: #fff;
            padding: 15px;
            cursor: pointer;
          }
        }
      }
    }
    .contentVue::-webkit-scrollbar {
      width: 0;
    }
    .contentOpration {
      width: 100%;
      height: 200px;
      background: #fff;
      border-right: 1px solid #f5f5f5;
      .opration {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 10px 20px;
        .opration-left {
          display: flex;
          align-items: center;
          .li {
            position: relative;
            margin-right: 10px;
            .fileBtn {
              width: 100%;
              height: 100%;
              position: absolute;
              left: 0;
              top: 0;
              opacity: 0;
              cursor: pointer;
              z-index: 98;
              border: none;
              outline: none;
            }
          }
        }
        .fastBtn {
          width: 80px;
          height: 30px;
          border-radius: 4px;
          line-height: 30px;
          text-align: center;
          background: rgba(0, 82, 217, 0.2);
          color: #0256ff;
          cursor: pointer;
        }
      }
      textarea {
        width: 100%;
        height: 80px;
        outline: none;
        border: none;
        padding: 10px 20px;
        font-size: 14px;
      }
      textarea::-webkit-input-placeholder {
        font-size: 14px;
        color: #999;
      } //使用webkit内核的浏览器
      textarea:-moz-placeholder {
        font-size: 14px;
        color: 999;
      } //Firefox版本4-18
      textarea::-moz-placeholder {
        font-size: 14px;
        color: 999;
      } //Firefox版本19+
      textarea:-ms-input-placeholder {
        font-size: 14px;
        color: 999;
      } ////IE浏览器

      .sendBtn {
        width: 70px;
        height: 38px;
        border-radius: 4px;
        line-height: 38px;
        text-align: center;
        background: #0256ff;
        color: #fff;
        cursor: pointer;
        margin-top: 10px;
      }
      .active {
        background: #f5f5f5;
      }
    }
  }

  .rightVue {
    width: 520px;
    height: calc(100vh - 186px);
    .right_th {
      width: 520px;
      height: 70px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      border-bottom: 1px solid #f5f5f5;
      border-left: 1px solid #f5f5f5;
      padding: 0 10px;
      .tab {
        width: 90px;
        height: 40px;
        background: #f5f5f5;
        border-radius: 6px;
        text-align: center;
        line-height: 40px;
        cursor: pointer;
      }
      .tabActive {
        background: #0256ff;
        color: #fff;
      }
    }
    .box {
      width: 500px;
      height: calc(100vh - 186px - 70px);
      overflow: scroll;
    }
    .box::-webkit-scrollbar {
      width: 0;
    }
  }
}
</style>